<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <link
      rel="stylesheet"
      media="screen and (max-width: 600px)"
      href="m1.css"
    />
    <!-- 最大值600 多于600就不加载 -->
    <link
      rel="stylesheet"
      media="screen and (min-width: 600px)"
      href="m1.css"
    />
    <!-- 最小值600 小于600 不加载 -->
    <link
      rel="stylesheet"
      media="screen and (min-width: 800px)"
      href="m2.css"
    />
    <!-- 最小值800 如果小800就不加载 -->
    <style>
      /* body {
        background-color: lightgreen;
      } */

      /* @media screen and (max-width: 800px) {
        body {
          background-color: lightblue;
        }
      } */
    </style>
  </head>
  <body></body>
</html>
